<script lang="ts" setup>
import {reactive, ref} from "vue";
import {getDeptTree} from "@/api/system";
import DataForm from "@/components/data-form/index.vue";

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const enums = ref<{[key:string]:any}>({});
const deptData = ref<any[]>([]);
const form = reactive({
    userId: undefined,
    username: undefined,
    firstname: undefined,
    deptId: undefined,
    roles: [],
    email: undefined,
    mobile: undefined,
    sex: '2',
    birthDate: undefined,
    address: undefined,
    status: '1',
});

const open = (options: OpenFormConfig, enumData: any) => {
    enums.value = enumData;
    getDeptTree().then(({code, data}) => {
        if (code === 200) {
            deptData.value = data.rows;
            dataFormRef.value?.open(options);
        }
    })
};

defineExpose({open})
</script>
<template>
    <data-form ref="dataFormRef" :model="form" description="用户信息" :rule-field="['roles', 'email', 'mobile']" rule-prop="system">
        <el-form-item v-show="false" prop="userId">
            <el-input v-model="form.userId"/>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="用户名" :disabled="!!form.userId"/>
        </el-form-item>
        <el-form-item label="真实姓名" prop="firstname">
            <el-input v-model="form.firstname" placeholder="真实姓名"/>
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
            <el-tree-select v-model="form.deptId" nodeKey="id" :accordion="true" :expand-on-click-node="true" :data="deptData"/>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
            <el-select v-model="form.roles" value-key="roleId" :multiple="true" :max-collapse-tags="3">
                <el-option v-for="item in enums.roles" :key="item.roleId" :label="item.alias" :value="item">
                    <span style="float: left">{{ item.alias }}</span>
                    <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; margin-left: 45px; padding-right:5px">{{ item.roleName }}</span>
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email" :required="false">
            <el-input v-model="form.email" placeholder="电子邮箱"/>
        </el-form-item>
        <el-form-item label="联系号码" prop="mobile" :required="false">
            <el-input v-model="form.mobile" placeholder="联系号码"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex">
                <el-option v-for="(item, index) in enums.sex" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker type="date" v-model="form.birthDate" placeholder="出生日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%"/>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
            <el-input v-model="form.address" placeholder="家庭住址"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-select v-model="form.status">
                <el-option v-for="(item, index) in enums.status" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
    </data-form>
</template>